<template>
    <label class="ac-cell-item" v-if="type == 'label' || type == 'checkbox' || type == 'radio'">
        <span class="ac-cell-left" v-if="checkLeft">
            <span class="ac-cell-icon"><slot name="icon"></slot></span>
            <slot name="left"></slot>
        </span>
        <label class="ac-cell-right" :class="classes">
            <slot name="right"></slot>
            <i v-if="type == 'checkbox'" class="ac-cell-checkbox-icon"></i>
            <i v-if="type == 'radio'" class="ac-cell-radio-icon"></i>
        </label>
    </label>
    <router-link class="ac-cell-item" :to="href" v-else-if="type == 'link'">
        <div class="ac-cell-left" v-if="checkLeft">
            <span class="ac-cell-icon"><slot name="icon"></slot></span>
            <slot name="left"></slot>
        </div>
        <div class="ac-cell-right" :class="classes">
            <slot name="right"></slot>
        </div>
    </router-link>
    <a class="ac-cell-item" :href="href" v-else-if="type == 'a'">
        <div class="ac-cell-left" v-if="checkLeft">
            <span class="ac-cell-icon"><slot name="icon"></slot></span>
            <slot name="left"></slot>
        </div>
        <div class="ac-cell-right" :class="classes">
            <slot name="right"></slot>
        </div>
    </a>
    <div class="ac-cell-item" v-else>
        <div class="ac-cell-left" v-if="checkLeft">
            <span class="ac-cell-icon"><slot name="icon"></slot></span>
            <slot name="left"></slot>
        </div>
        <div class="ac-cell-right" :class="classes">
            <slot name="right"></slot>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        name: 'ac-cell-item',
        props: {
            type: {
                validator (value) {
                    return ['link', 'a', 'label', 'div', 'checkbox', 'radio'].indexOf(value) > -1;
                },
                default: 'div'
            },
            arrow: {
                type: Boolean,
                default: false
            },
            href: {
                type: [String, Object]
            }
        },
        computed: {
            checkLeft() {
                return !!this.$slots.left || !!this.$slots.icon;
            },
            classes() {
                return this.arrow ? 'ac-cell-arrow' : '';
            }
        }
    }
</script>

<style lang="less">
    @import '../../../styles/components/cell.less';
</style>
